<html>

	<head>
		<meta http-equiv=Content-Type content="text/html; charset=gb2312">
		<meta name=Generator content="Microsoft Word 14 (filtered)">
		<style>
			/* Font Definitions */
			@font-face {
				font-family: Wingdings;
				panose-1: 5 0 0 0 0 0 0 0 0 0;
			}
			@font-face {
				font-family: '';
				panose-1: 2 1 6 0 3 1 1 1 1 1;
			}
			@font-face {
				font-family: "Cambria Math";
				panose-1: 2 4 5 3 5 4 6 3 2 4;
			}
			@font-face {
				font-family: Cambria;
				panose-1: 2 4 5 3 5 4 6 3 2 4;
			}
			@font-face {
				font-family: Calibri;
				panose-1: 2 15 5 2 2 2 4 3 2 4;
			}
			@font-face {
				font-family: Tahoma;
				panose-1: 2 11 6 4 3 5 4 4 2 4;
			}
			@font-face {
				font-family: Consolas;
				panose-1: 2 11 6 9 2 2 4 3 2 4;
			}
			@font-face {
				font-family: "\@''";
				panose-1: 2 1 6 0 3 1 1 1 1 1;
			}
			/* Style Definitions */
			p.MsoNormal, li.MsoNormal, div.MsoNormal {
				margin: 0in;
				margin-bottom: .0001pt;
				font-size: 11.0pt;
				font-family: "Calibri", "sans-serif";
			}
			h1 {
				mso-style-link: "Heading 1 Char";
				margin-top: 24.0pt;
				margin-right: 0in;
				margin-bottom: 0in;
				margin-left: 0in;
				margin-bottom: .0001pt;
				page-break-after: avoid;
				font-size: 14.0pt;
				font-family: "Cambria", "serif";
				color: #365F91;
			}
			h2 {
				mso-style-link: "Heading 2 Char";
				margin-top: 10.0pt;
				margin-right: 0in;
				margin-bottom: 0in;
				margin-left: 0in;
				margin-bottom: .0001pt;
				page-break-after: avoid;
				font-size: 13.0pt;
				font-family: "Cambria", "serif";
				color: #4F81BD;
			}
			h3 {
				mso-style-link: "Heading 3 Char";
				margin-top: 10.0pt;
				margin-right: 0in;
				margin-bottom: 0in;
				margin-left: 0in;
				margin-bottom: .0001pt;
				page-break-after: avoid;
				font-size: 11.0pt;
				font-family: "Cambria", "serif";
				color: #4F81BD;
			}
			h4 {
				mso-style-link: "Heading 4 Char";
				margin-top: 10.0pt;
				margin-right: 0in;
				margin-bottom: 0in;
				margin-left: 0in;
				margin-bottom: .0001pt;
				page-break-after: avoid;
				font-size: 11.0pt;
				font-family: "Cambria", "serif";
				color: #4F81BD;
				font-style: italic;
			}
			p.MsoToc1, li.MsoToc1, div.MsoToc1 {
				margin-top: 0in;
				margin-right: 0in;
				margin-bottom: 5.0pt;
				margin-left: 0in;
				font-size: 11.0pt;
				font-family: "Calibri", "sans-serif";
			}
			p.MsoToc2, li.MsoToc2, div.MsoToc2 {
				margin-top: 0in;
				margin-right: 0in;
				margin-bottom: 5.0pt;
				margin-left: 11.0pt;
				font-size: 11.0pt;
				font-family: "Calibri", "sans-serif";
			}
			p.MsoToc3, li.MsoToc3, div.MsoToc3 {
				margin-top: 0in;
				margin-right: 0in;
				margin-bottom: 5.0pt;
				margin-left: 22.0pt;
				font-size: 11.0pt;
				font-family: "Calibri", "sans-serif";
			}
			p.MsoTitle, li.MsoTitle, div.MsoTitle {
				mso-style-link: "Title Char";
				margin-top: 0in;
				margin-right: 0in;
				margin-bottom: 15.0pt;
				margin-left: 0in;
				border: none;
				padding: 0in;
				font-size: 26.0pt;
				font-family: "Cambria", "serif";
				color: #17365D;
				letter-spacing: .25pt;
			}
			p.MsoTitleCxSpFirst, li.MsoTitleCxSpFirst, div.MsoTitleCxSpFirst {
				mso-style-link: "Title Char";
				margin: 0in;
				margin-bottom: .0001pt;
				border: none;
				padding: 0in;
				font-size: 26.0pt;
				font-family: "Cambria", "serif";
				color: #17365D;
				letter-spacing: .25pt;
			}
			p.MsoTitleCxSpMiddle, li.MsoTitleCxSpMiddle, div.MsoTitleCxSpMiddle {
				mso-style-link: "Title Char";
				margin: 0in;
				margin-bottom: .0001pt;
				border: none;
				padding: 0in;
				font-size: 26.0pt;
				font-family: "Cambria", "serif";
				color: #17365D;
				letter-spacing: .25pt;
			}
			p.MsoTitleCxSpLast, li.MsoTitleCxSpLast, div.MsoTitleCxSpLast {
				mso-style-link: "Title Char";
				margin-top: 0in;
				margin-right: 0in;
				margin-bottom: 15.0pt;
				margin-left: 0in;
				border: none;
				padding: 0in;
				font-size: 26.0pt;
				font-family: "Cambria", "serif";
				color: #17365D;
				letter-spacing: .25pt;
			}
			p.MsoSubtitle, li.MsoSubtitle, div.MsoSubtitle {
				mso-style-link: "Subtitle Char";
				margin: 0in;
				margin-bottom: .0001pt;
				font-size: 12.0pt;
				font-family: "Cambria", "serif";
				color: #4F81BD;
				letter-spacing: .75pt;
				font-style: italic;
			}
			a:link, span.MsoHyperlink {
				color: blue;
				text-decoration: underline;
			}
			a:visited, span.MsoHyperlinkFollowed {
				color: purple;
				text-decoration: underline;
			}
			p.MsoAcetate, li.MsoAcetate, div.MsoAcetate {
				mso-style-link: "Balloon Text Char";
				margin: 0in;
				margin-bottom: .0001pt;
				font-size: 8.0pt;
				font-family: "Tahoma", "sans-serif";
			}
			p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph {
				margin-top: 0in;
				margin-right: 0in;
				margin-bottom: 0in;
				margin-left: .5in;
				margin-bottom: .0001pt;
				font-size: 11.0pt;
				font-family: "Calibri", "sans-serif";
			}
			p.MsoTocHeading, li.MsoTocHeading, div.MsoTocHeading {
				margin-top: 24.0pt;
				margin-right: 0in;
				margin-bottom: 0in;
				margin-left: 0in;
				margin-bottom: .0001pt;
				line-height: 115%;
				page-break-after: avoid;
				font-size: 14.0pt;
				font-family: "Cambria", "serif";
				color: #365F91;
				font-weight: bold;
			}
			span.Heading2Char {
				mso-style-name: "Heading 2 Char";
				mso-style-link: "Heading 2";
				font-family: "Cambria", "serif";
				color: #4F81BD;
				font-weight: bold;
			}
			span.Heading1Char {
				mso-style-name: "Heading 1 Char";
				mso-style-link: "Heading 1";
				font-family: "Cambria", "serif";
				color: #365F91;
				font-weight: bold;
			}
			span.apple-style-span {
				mso-style-name: apple-style-span;
			}
			span.TitleChar {
				mso-style-name: "Title Char";
				mso-style-link: Title;
				font-family: "Cambria", "serif";
				color: #17365D;
				letter-spacing: .25pt;
			}
			span.BalloonTextChar {
				mso-style-name: "Balloon Text Char";
				mso-style-link: "Balloon Text";
				font-family: "Tahoma", "sans-serif";
			}
			span.apple-converted-space {
				mso-style-name: apple-converted-space;
			}
			span.Heading3Char {
				mso-style-name: "Heading 3 Char";
				mso-style-link: "Heading 3";
				font-family: "Cambria", "serif";
				color: #4F81BD;
				font-weight: bold;
			}
			span.Heading4Char {
				mso-style-name: "Heading 4 Char";
				mso-style-link: "Heading 4";
				font-family: "Cambria", "serif";
				color: #4F81BD;
				font-weight: bold;
				font-style: italic;
			}
			span.SubtitleChar {
				mso-style-name: "Subtitle Char";
				mso-style-link: Subtitle;
				font-family: "Cambria", "serif";
				color: #4F81BD;
				letter-spacing: .75pt;
				font-style: italic;
			}
			.MsoChpDefault {
				font-family: "Calibri", "sans-serif";
			}
			.MsoPapDefault {
				margin-bottom: 10.0pt;
				line-height: 115%;
			}
			@page WordSection1 {
				size: 8.5in 11.0in;
				margin: 1.0in 1.25in 1.0in 1.25in;
			}
			div.WordSection1 {
				page: WordSection1;
			}
			/* List Definitions */
			ol {
				margin-bottom: 0in;
			}
			ul {
				margin-bottom: 0in;
			}


		</style>
		<style>
			#toTop {
				width: 280px;
				border: 1px solid #ccc;
				background: #f7f7f7;
				text-align: center;
				padding: 5px;
				position: fixed; /* this is the magic */
				bottom: 10px; /* together with this to put the div at the bottom*/
				right: 10px;
				display: none;
				color: #333;
				font-family: verdana;
				font-size: 11px;
				font-weight: bold;
				border-radius: 5px 5px;
			}

			#toTop span {
				cursor: pointer;
				margin: 2px 5px 2px 5px;
				padding: 2px 8px 2px 8px;
				border-radius: 5px 5px;
			}

			#toTop span:hover {
				color: #4F81BD;
			}
		</style>

	</head>
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$(window).scroll(function() {
				if($(this).scrollTop() != 0) {
					$('#toTop').fadeIn();
				} else {
					$('#toTop').fadeOut();
				}
			});

			// $('#toTop').click(function() {
			// $('body,html').animate({
			// scrollTop : 0
			// }, 800);
			// });
		});

		function gohome() {
		    window.location = "Default.aspx";
		}

		function gotop() {
			$('body,html').animate({
				scrollTop : 0
			}, 800);
		}
	</script>
	</script>
	<body lang=EN-US link=blue vlink=purple >
		<div id="toTop">
			<span onclick="gohome()"> &lt; back to home page</span><span onclick="gotop()">^ Back to Top</span>
		</div>
		<div style="margin: 15px 0px 13px 15px;">
			<a href="javascript:gohome()" >&lt; back to home page</a>
		</div>
		<div class="WordSection1" style="margin: 15px 15px 15px 15px">

			<div style='border:none;border-bottom:solid #4F81BD 1.0pt;padding:0in 0in 4.0pt 0in'>

				<p class=MsoTitleCxSpLast>
					Introduction to jQuery client
				</p>

			</div>

			<p class=MsoSubtitle>
				A jQuery plugin helping you to cope with server side code
			</p>

			<p class=MsoTocHeading>
				Contents
			</p>

			<p class=MsoToc1>
				<a href="#_Toc323558101">$.doPostback<span style='color:windowtext;
				display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>3</span></a>
			</p>

			<p class=MsoToc2>
				<a href="#_Toc323558102">$.doPostback and WebMethod<span
				style='color:windowtext;display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>3</span></a>
			</p>

			<p class=MsoToc2>
				<a href="#_Toc323558103">$.doPostback and MVC<span
				style='color:windowtext;display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>3</span></a>
			</p>

			<p class=MsoToc2>
				<a href="#_Toc323558104">Callback function<span
				style='color:windowtext;display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>3</span></a>
			</p>

			<p class=MsoToc2>
				<a href="#_Toc323558105">Options<span style='color:windowtext;
				display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>3</span></a>
			</p>

			<p class=MsoToc1>
				<a href="#_Toc323558106">DataBind<span style='color:windowtext;
				display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>4</span></a>
			</p>

			<p class=MsoToc2>
				<a href="#_Toc323558107">Template<span style='color:windowtext;
				display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>4</span></a>
			</p>

			<p class=MsoToc2>
				<a href="#_Toc323558108">Pagination<span style='color:windowtext;
				display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>4</span></a>
			</p>

			<p class=MsoToc3>
				<a href="#_Toc323558109">trigger('goto')<span
				style='color:windowtext;display:none;text-decoration:none'> </span><span
				style='color:windowtext;display:none;text-decoration:none'>5</span></a>
			</p>

			<p class=MsoToc2>
				<a href="#_Toc323558110">Insert, update and delete<span
				style='color:windowtext;display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>5</span></a>
			</p>

			<p class=MsoToc3>
				<a href="#_Toc323558111">trigger('insert')<span
				style='color:windowtext;display:none;text-decoration:none'> </span><span
				style='color:windowtext;display:none;text-decoration:none'>6</span></a>
			</p>

			<p class=MsoToc3>
				<a href="#_Toc323558112">trigger('update')<span
				style='color:windowtext;display:none;text-decoration:none'> </span><span
				style='color:windowtext;display:none;text-decoration:none'>6</span></a>
			</p>

			<p class=MsoToc3>
				<a href="#_Toc323558113">trigger('delete')<span
				style='color:windowtext;display:none;text-decoration:none'> </span><span
				style='color:windowtext;display:none;text-decoration:none'>6</span></a>
			</p>

			<p class=MsoToc2>
				<a href="#_Toc323558114">Search - trigger('filter')<span
				style='color:windowtext;display:none;text-decoration:none'> </span><span
				style='color:windowtext;display:none;text-decoration:none'>6</span></a>
			</p>

			<p class=MsoToc2>
				<a href="#_Toc323558115">Sort - trigger('sort')<span
				style='color:windowtext;display:none;text-decoration:none'> </span><span
				style='color:windowtext;display:none;text-decoration:none'>6</span></a>
			</p>

			<p class=MsoToc2>
				<a href="#_Toc323558116">Combine these functions -
				trigger('suspend')<span style='color:windowtext;display:none;text-decoration:
				none'> </span><span
				style='color:windowtext;display:none;text-decoration:none'>7</span></a>
			</p>

			<p class=MsoToc2>
				<a href="#_Toc323558117">Options<span style='color:windowtext;
				display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>7</span></a>
			</p>

			<p class=MsoToc1>
				<a href="#_Toc323558118">Data type helper<span
				style='color:windowtext;display:none;text-decoration:none'> </span><span
				style='color:windowtext;display:none;text-decoration:none'>7</span></a>
			</p>

			<p class=MsoToc2>
				<a href="#_Toc323558119">String<span style='color:windowtext;
				display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>8</span></a>
			</p>

			<p class=MsoToc3>
				<a href="#_Toc323558120">$d.string.truncate(string, length,
				ellipse)<span style='color:windowtext;display:none;text-decoration:none'> </span><span
				style='color:windowtext;display:none;text-decoration:none'>8</span></a>
			</p>

			<p class=MsoToc3>
				<a href="#_Toc323558121">$d.string.stripHTML(string)<span
				style='color:windowtext;display:none;text-decoration:none'> </span><span
				style='color:windowtext;display:none;text-decoration:none'>8</span></a>
			</p>

			<p class=MsoToc3>
				<a href="#_Toc323558122">$d.string.encodeHTML(string)<span
				style='color:windowtext;display:none;text-decoration:none'> </span><span
				style='color:windowtext;display:none;text-decoration:none'>8</span></a>
			</p>

			<p class=MsoToc3>
				<a href="#_Toc323558123">$d.string.decodeHTML<span
				style='color:windowtext;display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>8</span></a>
			</p>

			<p class=MsoToc2>
				<a href="#_Toc323558124">Date time<span style='color:windowtext;
				display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>8</span></a>
			</p>

			<p class=MsoToc3>
				<a href="#_Toc323558125">$d.datetime.parse(value, format)<span
				style='color:windowtext;display:none;text-decoration:none'> </span><span
				style='color:windowtext;display:none;text-decoration:none'>9</span></a>
			</p>

			<p class=MsoToc3>
				<a href="#_Toc323558126">$d.datetime.format(value, toFormat,
				fromFormat)<span style='color:windowtext;display:none;text-decoration:none'> </span><span
				style='color:windowtext;display:none;text-decoration:none'>9</span></a>
			</p>

			<p class=MsoToc3>
				<a href="#_Toc323558127">$d.datetime.validate(value, format)<span
				style='color:windowtext;display:none;text-decoration:none'> </span><span
				style='color:windowtext;display:none;text-decoration:none'>9</span></a>
			</p>

			<p class=MsoToc2>
				<a href="#_Toc323558128">GUID<span style='color:windowtext;
				display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>10</span></a>
			</p>

			<p class=MsoToc3>
				<a href="#_Toc323558129">$d. guid. generate()<span
				style='color:windowtext;display:none;text-decoration:none'> </span><span
				style='color:windowtext;display:none;text-decoration:none'>10</span></a>
			</p>

			<p class=MsoToc3>
				<a href="#_Toc323558130">$d. guid. validate(value)<span
				style='color:windowtext;display:none;text-decoration:none'> </span><span
				style='color:windowtext;display:none;text-decoration:none'>10</span></a>
			</p>

			<p class=MsoToc2>
				<a href="#_Toc323558131">URL<span style='color:windowtext;
				display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>10</span></a>
			</p>

			<p class=MsoToc3>
				<a href="#_Toc323558132">$d.url.para(name)<span
				style='color:windowtext;display:none;text-decoration:none'> </span><span
				style='color:windowtext;display:none;text-decoration:none'>10</span></a>
			</p>

			<p class=MsoToc1>
				<a href="#_Toc323558133">Get/set data from/to page<span
				style='color:windowtext;display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>10</span></a>
			</p>

			<p class=MsoToc1>
				<a href="#_Toc323558134">Cope with complex data<span
				style='color:windowtext;display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>11</span></a>
			</p>

			<p class=MsoToc1>
				<a href="#_Toc323558135">Nested repeater<span
				style='color:windowtext;display:none;text-decoration:none'> </span><span
				style='color:windowtext;display:none;text-decoration:none'>11</span></a>
			</p>

			<p class=MsoToc2>
				<a href="#_Toc323558136">Nested foreach<span style='color:
				windowtext;display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>11</span></a>
			</p>

			<p class=MsoToc2>
				<a href="#_Toc323558137">Nested databind<span
				style='color:windowtext;display:none;text-decoration:none'>. </span><span
				style='color:windowtext;display:none;text-decoration:none'>12</span></a>
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<span style='font-size:11.0pt;line-height:115%;font-family:"Calibri","sans-serif"'>
				<br
				clear=all style='page-break-before:always'>
			</span>

			<p class=MsoNormal style='margin-bottom:10.0pt;line-height:115%'>
				<b><span
				style='font-size:14.0pt;line-height:115%;font-family:"Cambria","serif";
				color:#365F91'>&nbsp;</span></b>
			</p>

			<h1><a name="_Toc323558101">$.doPostback</a></h1>

			<p class=MsoNormal>
				This function can make an asynchronous call to the backend
				function.
			</p>

			<h2><a name="_Toc323558102">$.doPostback and WebMethod</a></h2>

			<p class=MsoNormal style='text-autospace:none'>
				In the default.aspx, I use $.doPostback
				to call the function in C# code:
			</p>

			<p class=MsoNormal>
				<span style='font-size:10.0pt;font-family:Consolas'>$.doPostback(function_name,
					parameters [, options]);</span>
			</p>

			<p class=MsoNormal style='margin-left:.5in'>
				&nbsp;
			</p>

			<p class=MsoNormal>
				There are two parameters (function name, parameters), and
				one optional parameter (options).
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				For example:
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>$.doPostback(<span style='color:maroon'>&quot;GetDemoModel&quot;</span>,
					{ keyword: <span style='color:maroon'>'a keyword'</span> });</span>
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal>
				It calls the GetDemoModel function, and this function has
				one parameter - keyword, which value is 'a keyword'.
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal>
				This is the announcement of GetDemoModel function in the
				code behind (in the Default.aspx.cs file):
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>[<span style='color:#2B91AF'>WebMethod</span>]</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas;color:blue'>public</span><span style='font-size:10.0pt;
				font-family:Consolas'> <span style='color:blue'>static</span> <span
					style='color:#2B91AF'>IEnumerable</span> GetDemoModel(<span style='color:blue'>string</span> keyword)</span>
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal>
				You must add <span style='font-size:10.0pt;font-family:Consolas;
				color:#2B91AF'>WebMethod</span><span style='font-size:10.0pt;font-family:Consolas'> </span>attribute to the function, and the function must be a <span
				style='font-size:10.0pt;font-family:Consolas;color:blue'>static</span><span
				style='font-size:10.0pt;font-family:Consolas'> </span>function.
			</p>

			<h2><a name="_Toc323558103">$.doPostback and MVC</a></h2>

			<p class=MsoNormal>
				You can easily integrate $.doPostback with your asp.net MVC.
				You need to provide the action name instead of function name to it. For
				example:
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>$.doPostback(<span style='color:maroon'>'<span
						style='background:yellow'>@</span></span>Url.Action(<span style='color:#A31515'>&quot;Action_Name&quot;</span>)<span
					style='color:maroon'>'</span>, { <span style='color:darkgreen'>//parameter list </span>}, { <span style='color:darkgreen'>//options </span>});</span>
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<h2><a name="_Toc323558104">Callback function</a></h2>

			<p class=MsoNormal>
				Since we use ajax to call the function, the action is
				asynchronous. We need to use the call back function to handle the return value
				and the actions afterward.
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal>
				You can add callback function in options parameter.
				Therefore the previous demo can be extended in this way:
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>$.doPostback(<span style='color:maroon'>&quot;GetDemoModel&quot;</span>,
					{ </span><span style='font-size:9.5pt;font-family:Consolas'>keyword</span><span
				style='font-size:10.0pt;font-family:Consolas'>: $(<span style='color:maroon'>'#keyword'</span>).val()
					}, { callback: <span style='color:blue'>function</span> (data) {<span
					style='color:darkgreen'> //the callback function body...</span> }});</span>
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				The <span style='font-family:
				Consolas'>data</span> in the return value of GetDemoModel method, which is a
				list of <span style='font-size:10.0pt;font-family:Consolas;color:#2B91AF'>DemoDetailModel</span>.<span
				style='font-size:12.0pt;font-family:Consolas;color:#2B91AF'> </span>You can use <span style='font-size:10.0pt;font-family:Consolas'>data.d</span><span
				style='font-size:10.0pt'> </span>to get the json array of this model.
			</p>

			<h2><a name="_Toc323558105">Options</a></h2>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<table class=MsoTableLightShadingAccent5 border=1 cellspacing=0 cellpadding=0
			style='border-collapse:collapse;border:none'>
				<tr>
					<td width=185 valign=top style='width:110.7pt;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal style='text-autospace:none'>
						<b><span style='color:#31849B'>&nbsp;</span></b>
					</p></td>
					<td width=267 valign=top style='width:160.2pt;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal style='text-autospace:none'>
						<b><span style='color:#31849B'>Description </span></b>
					</p></td>
					<td width=285 valign=top style='width:171.0pt;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal style='text-autospace:none'>
						<b><span style='color:#31849B'>Default
							value</span></b>
					</p></td>
				</tr>
				<tr>
					<td width=185 valign=top style='width:110.7pt;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal style='text-autospace:none'>
						<b><span style='color:#31849B'>url:&nbsp; </span></b>
					</p></td>
					<td width=267 valign=top style='width:160.2pt;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal style='text-autospace:none'>
						<span style='color:#31849B'>The
							location of the method called is located. </span>
					</p></td>
					<td width=285 valign=top style='width:171.0pt;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal style='text-autospace:none'>
						<span style='color:#31849B'>current
							page</span>
					</p></td>
				</tr>
				<tr>
					<td width=185 valign=top style='width:110.7pt;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal style='text-autospace:none'>
						<b><span style='color:#31849B'>callback:</span></b>
					</p></td>
					<td width=267 valign=top style='width:160.2pt;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal style='text-autospace:none'>
						<span style='color:#31849B'>The
							callback function</span>
					</p></td>
					<td width=285 valign=top style='width:171.0pt;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal style='text-autospace:none'>
						<span style='color:#31849B'>Empty
							function</span>
					</p></td>
				</tr>
				<tr>
					<td width=185 valign=top style='width:110.7pt;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal style='text-autospace:none'>
						<b><span style='color:#31849B'>show_progress_icon:</span></b>
					</p></td>
					<td width=267 valign=top style='width:160.2pt;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal style='text-autospace:none'>
						<span style='color:#31849B'>Whether
							to show the loading icon during the function call. </span>
					</p></td>
					<td width=285 valign=top style='width:171.0pt;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal style='text-autospace:none'>
						<span style='color:#31849B'>true</span>
					</p></td>
				</tr>
				<tr>
					<td width=185 valign=top style='width:110.7pt;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal style='text-autospace:none'>
						<b><span style='color:#31849B'>progress_icon: </span></b>
					</p></td>
					<td width=267 valign=top style='width:160.2pt;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal style='text-autospace:none'>
						<span style='color:#31849B'>The
							loading icon</span>
					</p></td>
					<td width=285 valign=top style='width:171.0pt;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal style='text-autospace:none'>
						<span style='color:#31849B'>&quot;/content/images/ajax-loader.gif&quot;</span>
					</p></td>
				</tr>
				<tr>
					<td width=185 valign=top style='width:110.7pt;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal style='text-autospace:none'>
						<b><span style='color:#31849B'>error: </span></b>
					</p></td>
					<td width=267 valign=top style='width:160.2pt;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal style='text-autospace:none'>
						<span style='color:#31849B'>The
							function that handles the errors. </span>
					</p></td>
					<td width=285 valign=top style='width:171.0pt;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal style='text-autospace:none'>
						<span style='color:#31849B'>showing
							the error message</span>
					</p></td>
				</tr>
			</table>

			<h1><a name="_Toc323558106">DataBind</a></h1>

			<p class=MsoNormal style='text-autospace:none'>
				For most scenarios, we need to
				bind the list to a repeater. We can use dataBind function instead of asp:repeater,
				asp:gridview or any other asp control.
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>$.fn.dataBind(template, data [, options])</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				dataBind function has there
				paramters:
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>template is the template of the repeater
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>data is the data source of the repeater, which should be an array
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>options is an optional parameter
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				Let's bind the data to the
				previous example:
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>$.doPostback(<span style='color:maroon'>&quot;GetDemoModel&quot;</span>,
					{ </span><span style='font-size:9.5pt;font-family:Consolas'>keyword</span><span
				style='font-size:10.0pt;font-family:Consolas'>: $(<span style='color:maroon'>'#keyword'</span>).val()
					}, { </span>
			</p>

			<p class=MsoNormal style='text-indent:.5in;text-autospace:none'>
				<span
				style='font-size:10.0pt;font-family:Consolas'>callback: <span style='color:
					blue'>function</span> (data) {</span>
			</p>

			<p class=MsoNormal style='margin-left:.5in;text-indent:.5in;text-autospace:
			none'>
				<span style='font-size:10.0pt;font-family:Consolas;color:darkgreen'>//bind
					data to the &quot;repeater&quot;</span>
			</p>

			<p class=MsoNormal style='margin-left:.5in;text-indent:.5in;text-autospace:
			none'>
				<span style='font-size:10.0pt;font-family:Consolas'>$(<span
					style='color:maroon'>&quot;#Container&quot;</span>).dataBind($(<span
					style='color:maroon'>&quot;#template&quot;</span>).text(), data.d);}});</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt'>&nbsp;</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				In this example, I bind the
				return value of GetDemoModel function to the Container element with the
				template defined in template element:
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>Container is just an empty div, which contains the final content
				of the 'repeater.'
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>Template is a textarea element. The template text is defined in
				this element. If the template is a valid html, you can define it any element,
				like div.
			</p>

			<h2><a name="_Toc323558107">Template</a></h2>

			<p class=MsoNormal>
				I use the jTemplates jQuery plugin as the center part of our
				repeater. You could read the <a href="http://jtemplates.tpython.com/"><b>specification</b></a>
				of jTemplates. I list some important items for you:
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-size:10.0pt;font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span style='font-size:10.0pt;font-family:Consolas'>{#foreach $T
					as <span style='color:#C00000'>d</span>} {#/for}</span>
			</p>

			<p class=MsoNormal style='text-indent:.5in'>
				The content in between of this will
				be repeated. You can change <span style='color:#C00000'>d</span> to other
				string.
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-size:10.0pt;font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span style='font-size:10.0pt;font-family:Consolas'>{$T.<span
					style='color:#C00000'>d</span>.<span style='color:#0070C0'>Name</span>}</span>
			</p>

			<p class=MsoNormal style='text-indent:.5in;text-autospace:none'>
				The space
				holder of <span style='font-size:10.0pt;font-family:Consolas;color:#0070C0'>Name</span><span
				style='font-size:9.0pt'> </span>property in <span style='color:#C00000'>d</span>.
				i.e. all the <span style='font-size:10.0pt;font-family:Consolas'>{$T.<span
					style='color:#C00000'>d</span>.<span style='color:#0070C0'>Name</span>} </span>will
				be replaced by the actual value of <span style='font-size:10.0pt;font-family:
				Consolas;color:#0070C0'>Name</span><span style='font-size:9.0pt'> </span>property
				in <span style='color:#C00000'>d</span>
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-size:10.0pt;font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span style='font-size:10.0pt;font-family:Consolas'>{#if}{#elseif}{#else} </span>
			</p>

			<p class=MsoNormal style='text-indent:.5in'>
				You can use conditional statements
				to customize some rows
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-size:10.0pt;font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span style='font-size:10.0pt;font-family:Consolas'>$index</span>
			</p>

			<p class=MsoNormal style='text-indent:.5in'>
				The space holder of row number
				starting with 0
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-size:10.0pt;font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span style='font-size:10.0pt;font-family:Consolas'>{#literal}
					{#/literal}</span>
			</p>

			<p class=MsoNormal style='text-indent:.5in'>
				You can use literal to escape curly
				brace ({ , }).
			</p>

			<h2><a name="_Toc323558108">Pagination</a></h2>

			<p class=MsoNormal>
				I integrate the pagination function in the dataBind function.
				You can indicate the page related information in the options parameters
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal>
				We can add pagination to the previous demonstration:
			</p>

			<p class=MsoNormal style='text-indent:.5in;text-autospace:none'>
				<span
				style='font-size:9.5pt;font-family:Consolas'>$.doPostback(<span
					style='color:maroon'>&quot;GetDemoModel&quot;</span>, { keyword: $(<span
					style='color:maroon'>'#keyword'</span>).val() }, {</span>
			</p>

			<p class=MsoNormal style='margin-left:.5in;text-indent:.5in;text-autospace:
			none'>
				<span style='font-size:9.5pt;font-family:Consolas'>callback: <span
					style='color:blue'>function</span> (data) {</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style='color:darkgreen'>//bind data to the &quot;repeater&quot;</span></span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					$(<span style='color:maroon'>&quot;#Container&quot;</span>).dataBind($(<span
					style='color:maroon'>&quot;#template&quot;</span>).text(), data.d, {</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					page_container: <span style='color:maroon'>'.PaginationContainer'</span>,</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					empty_text: <span style='color:maroon'>'&lt;span
						style=&quot;color:Red;&quot;&gt;No data in the data source.&lt;/span&gt;'</span>,</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					page_size: 9,</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;page_animation: <span style='color:maroon'>'fadein'</span></span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style='color:darkgreen'>/*</span></span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas;color:darkgreen'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					//you can define your &quot;fadein&quot; animation in this way:</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas;color:darkgreen'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					page_animation_start: { opacity: 0 },</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas;color:darkgreen'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					page_animation_end: { opacity: 1 },</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas;color:darkgreen'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					page_animation_duration: 500</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas;color:darkgreen'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					*/</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					});</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					}</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					});</span>
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in'>
				<span style='font-family:
				Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>&nbsp;page_container: The page number shown in the
				page_container. There could be more than one container.
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in'>
				<span style='font-family:
				Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>page_size: The item number of each page. The code does not apply
				the pagination if it less than 1.
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in'>
				<span style='font-family:
				Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>empty_text: The content shown in the container when there is no
				data in the data source
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>page_animation: Give an animation when the new page showing. You
				can define your animation with page_animation_start, page_animation_end and
				page_animation_duration options.
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				&nbsp;
			</p>

			<h3><a name="_Toc323558109"><span style='font-size:10.0pt'>trigger</span>(</a><span
			style='color:maroon'>'goto'</span>)</h3>

			<p class=MsoNormal style='text-autospace:none'>
				You can use '' to implement your
				pagination. &nbsp;CustomizedPage.aspx is an example.
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>trigger(<span style='color:maroon'>&quot;goto&quot;</span>,
					page_index)</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				page_index - the page index
			</p>

			<h2><a name="_Toc323558110">Insert, update and delete</a></h2>

			<p class=MsoNormal>
				The databind plugin is integrated with insertion, updating
				and deletion function.
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal>
				There is the example to add a new object to the page:
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>$(<span style='color:maroon'>&quot;#Container&quot;</span>).trigger(<span
					style='color:maroon'>&quot;insert&quot;</span>, </span><span style='font-size:
				9.5pt;font-family:Consolas'>obj</span><span style='font-size:10.0pt;font-family:
				Consolas'>);</span>
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>obj </span>is a data model.
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				Similarly, you can call <span
				style='font-size:10.0pt;font-family:Consolas'>$(<span style='color:maroon'>&quot;#Container&quot;</span>).trigger(<span
					style='color:maroon'>'update'</span>, obj);</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				to update the corresponding row
				in the page, and call <span style='font-size:10.0pt;font-family:Consolas'>$(<span
					style='color:maroon'>&quot;#Container&quot;</span>).trigger(<span
					style='color:maroon'>'delete'</span>, id); </span>to delete a row in the page.
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='background:#D9D9D9'>Important
					tips:</span>
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>Those functions only update the content on the page. They do not
				call the code to update the database. You have to use <span style='font-size:
				10.0pt;font-family:Consolas'>$.doPostback </span>to call the correct function
				to do so.
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>The model must have ID property when you want to use update
				function.
			</p>

			<h3><a name="_Toc323558111"><span style='font-size:10.0pt'>trigger</span>(</a><span
			style='color:maroon'>'insert'</span>)</h3>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>trigger</span><span style='font-size:9.5pt;font-family:
				Consolas'>(<span style='color:maroon'>'insert'</span>) </span>is the built in
				function for inserting a model
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>trigger</span><span style='font-size:9.5pt;font-family:
				Consolas'>(<span style='color:maroon'>'insert'</span>, [model, index])</span>
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>model - the model you want to insert.
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>Index - the position the model will be inserted into. The default
				value is 0. It can be either a number or a string in the following list:
			</p>

			<p class=MsoListParagraph style='margin-left:1.0in;text-indent:-.25in;
			text-autospace:none'>
				<span style='font-family:"Courier New"'>o<span
					style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp; </span></span>&quot;e&quot; -
				the end of list
			</p>

			<p class=MsoListParagraph style='margin-left:1.0in;text-indent:-.25in;
			text-autospace:none'>
				<span style='font-family:"Courier New"'>o<span
					style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp; </span></span>&quot;bp&quot;
				- the beginning of current page
			</p>

			<p class=MsoListParagraph style='margin-left:1.0in;text-indent:-.25in;
			text-autospace:none'>
				<span style='font-family:"Courier New"'>o<span
					style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp; </span></span>&quot;ep&quot;
				- the end of current page
			</p>

			<h3><a name="_Toc323558112"><span style='font-size:10.0pt'>trigger</span>(</a><span
			style='color:maroon'>'update'</span>)</h3>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>trigger</span><span style='font-size:9.5pt;font-family:
				Consolas'>(<span style='color:maroon'>'update'</span>) </span>is the built in
				function for updating a model
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>trigger</span><span style='font-size:9.5pt;font-family:
				Consolas'> (<span style='color:maroon'>'update'</span>, [model, ignoreNull])</span>
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>model - the model you want to update. The model must have 'ID'
				property, which is the ID of this model.
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>ignoreNull - whether updating the value that is null or undefined
				in model. The default value is false. i.e. it does not update the null or
				undefined values
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;</span>
			</p>

			<h3><a name="_Toc323558113"><span style='font-size:10.0pt'>trigger</span>(</a><span
			style='color:maroon'>'delete'</span>)</h3>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>trigger</span><span style='font-size:9.5pt;font-family:
				Consolas'>(<span style='color:maroon'>delete'</span>) </span>is the built in
				function for deleting a model
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>trigger</span><span style='font-size:9.5pt;font-family:
				Consolas'> (<span style='color:maroon'>'update'</span>, id)</span>
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>id - delete the model that 'ID' property equals to id
			</p>

			<h2><a name="_Toc323558114">Search - trigger(</a><span style='color:maroon'>'filter'</span>)</h2>

			<p class=MsoNormal style='text-autospace:none'>
				You can use<span
				style='color:#1F497D'> </span><span style='font-size:10.0pt;font-family:Consolas'>trigger(</span><span
				style='font-size:9.5pt;font-family:Consolas;color:maroon'>'filter'</span><span
				style='font-size:10.0pt;font-family:Consolas'>)</span><span style='color:#1F497D'> </span>to filter the data in the repeater.<span style='color:#1F497D'> </span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				In this example, the repeater only
				shows the data that Name property contains the text in 'keyword' textbox.
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-indent:.5in;text-autospace:none'>
				<span
				style='font-size:9.5pt;font-family:Consolas'>$(<span style='color:maroon'>&quot;#Container&quot;</span>).trigger(<span
					style='color:maroon'>'filter'</span>, [<span style='color:maroon'>'Name'</span>,
					$(<span style='color:maroon'>'#keyword'</span>).val()]);</span>
			</p>

			<h3>&nbsp;</h3>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>Besides the default searching function, you can write
					your function:</span>
			</p>

			<p class=MsoNormal style='margin-left:.5in;text-autospace:none'>
				<span
				style='font-size:9.5pt;font-family:Consolas'>$(<span style='color:maroon'>&quot;#Container&quot;</span>).trigger(<span
					style='color:maroon'>'filter'</span>, </span><span style='font-size:10.0pt;
				font-family:Consolas'>your_searching_function</span><span style='font-size:
				9.5pt;font-family:Consolas'>);</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>You can get an example in search.aspx page.</span>
			</p>

			<h2><a name="_Toc323558115">Sort - trigger(</a><span style='color:maroon'>'sort'</span>)</h2>

			<p class=MsoNormal style='text-autospace:none'>
				You can use<span
				style='color:#1F497D'> </span><span style='font-size:10.0pt;font-family:Consolas'>trigger(<span
					style='color:maroon'>'sort'</span>)</span><span style='color:#1F497D'> </span>to
				sort the data in the repeater. There are some examples:
			</p>

			<p class=MsoNormal>
				<span style='color:#1F497D'>&nbsp;</span>
			</p>

			<p class=MsoNormal style='margin-left:.5in;text-autospace:none'>
				<span
				style='font-size:10.0pt;font-family:Consolas'>$(<span style='color:maroon'>&quot;#Container&quot;</span>).trigger(<span
					style='color:maroon'>'sort'</span>, <span style='color:maroon'>'GPA'</span>);</span>
			</p>

			<p class=MsoNormal style='text-indent:.5in'>
				Sort GPA (ascending)
			</p>

			<p class=MsoNormal style='margin-left:.5in'>
				<span style='color:#1F497D'>&nbsp;</span>
			</p>

			<p class=MsoNormal style='margin-left:.5in;text-autospace:none'>
				<span
				style='font-size:10.0pt;font-family:Consolas'>$(<span style='color:maroon'>&quot;#Container&quot;</span>).trigger(<span
					style='color:maroon'>'sort'</span>, [<span style='color:maroon'>'Name'</span>,
					-1]);</span>
			</p>

			<p class=MsoNormal style='text-indent:.5in'>
				Sort Name (descending)
			</p>

			<p class=MsoNormal style='margin-left:.5in'>
				<span style='color:#1F497D'>&nbsp;</span>
			</p>

			<p class=MsoNormal style='margin-left:.5in;text-autospace:none'>
				<span
				style='font-size:10.0pt;font-family:Consolas'>$(<span style='color:maroon'>&quot;#Container&quot;</span>).trigger(<span
					style='color:maroon'>'sort'</span>, [<span style='color:maroon'>'Birthday'</span>,
					1, <span style='color:maroon'>'datetime'</span>]);</span>
			</p>

			<p class=MsoNormal style='text-indent:.5in'>
				Sort Birthday (ascending)
			</p>

			<p class=MsoNormal style='text-indent:.5in'>
				&nbsp;
			</p>

			<p class=MsoNormal>
				You can define your sorting function
			</p>

			<p class=MsoNormal style='margin-left:.5in;text-autospace:none'>
				<span
				style='font-size:10.0pt;font-family:Consolas'>$(<span style='color:maroon'>&quot;#Container&quot;</span>).trigger(<span
					style='color:maroon'>'sort'</span>, your_sorting_function);</span>
			</p>

			<p class=MsoNormal style='margin-left:.5in;text-autospace:none'>
				<span
				style='font-size:10.0pt;font-family:Consolas'>&nbsp;</span>
			</p>

			<p class=MsoNormal>
				The page AvancedSort.aspx provides an example:
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>$(<span style='color:maroon'>&quot;#Container&quot;</span>).trigger(<span
					style='color:maroon'>'sort'</span>, <span style='color:blue'>function</span> (a, b) {</span>
			</p>

			<p class=MsoNormal style='text-indent:.5in;text-autospace:none'>
				<span
				style='font-size:10.0pt;font-family:Consolas;color:blue'>return</span><span
				style='font-size:10.0pt;font-family:Consolas'> a.Student.GPA == b.Student.GPA ?</span>
			</p>

			<p class=MsoNormal style='margin-left:.5in;text-indent:.5in;text-autospace:
			none'>
				<span style='font-size:10.0pt;font-family:Consolas'>(a.Student.Name &lt;
					b.Student.Name ? -1 : 1) :</span>
			</p>

			<p class=MsoNormal style='margin-left:.5in;text-indent:.5in;text-autospace:
			none'>
				<span style='font-size:10.0pt;font-family:Consolas'>(a.Student.GPA -
					b.Student.GPA) * d;</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>});</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>&nbsp;</span>
			</p>

			<h2><a name="_Toc323558116">Combine these functions - trigger(</a><span
			style='color:maroon'>'suspend'</span>)</h2>

			<p class=MsoNormal>
				You can freeze/unfreeze the page for multiple commands. When
				you want to call the trigger function multiple times, you can write them
				between:
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>$(<span style='color:maroon'>&quot;#Container&quot;</span>).trigger(<span
					style='color:maroon'>&quot;suspend&quot;</span>, <span style='color:blue'>true</span>);</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-family:Consolas;
				color:darkgreen'>//your code ...</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>$(<span style='color:maroon'>&quot;#Container&quot;</span>).trigger(<span
					style='color:maroon'>&quot;suspend&quot;</span>, <span style='color:blue'>false</span>);</span>
			</p>

			<p class=MsoNormal>
				<span style='color:#1F497D'>&nbsp;</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>trigger(<span style='color:maroon'>&quot;suspend&quot;</span>, <span style='color:blue'>true</span>)&nbsp; </span>- suspend the page updating<span
				style='color:#1F497D'> </span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>trigger(<span style='color:maroon'>&quot;suspend&quot;</span>, <span style='color:blue'>false</span>) </span>- &nbsp;update the page
			</p>

			<p class=MsoNormal>
				<span style='color:#1F497D'>&nbsp;</span>
			</p>

			<p class=MsoNormal>
				You can find examples in multicommand.aspx
			</p>

			<h2><a name="_Toc323558117">Options</a></h2>

			<p class=MsoNormal style='text-indent:.5in;text-autospace:none'>
				<span
				style='font-size:9.5pt;font-family:Consolas'>&nbsp;</span>
			</p>

			<table class=MsoTableLightShadingAccent5 border=1 cellspacing=0 cellpadding=0
			style='border-collapse:collapse;border:none'>
				<tr>
					<td width=219 valign=top style='width:131.4pt;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>&nbsp;</span></b>
					</p></td>
					<td width=360 valign=top style='width:3.0in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>Description</span></b>
					</p></td>
					<td width=135 valign=top style='width:81.0pt;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>Default value</span></b>
					</p></td>
				</tr>
				<tr>
					<td width=219 valign=top style='width:131.4pt;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>page_container</span></b>
					</p></td>
					<td width=360 valign=top style='width:3.0in;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>The container of the page
							indexer</span>
					</p></td>
					<td width=135 valign=top style='width:81.0pt;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>Empty string</span>
					</p></td>
				</tr>
				<tr>
					<td width=219 valign=top style='width:131.4pt;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>page_size</span></b>
					</p></td>
					<td width=360 valign=top style='width:3.0in;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>The page size</span>
					</p></td>
					<td width=135 valign=top style='width:81.0pt;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>0</span>
					</p></td>
				</tr>
				<tr>
					<td width=219 valign=top style='width:131.4pt;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>initial_page</span></b>
					</p></td>
					<td width=360 valign=top style='width:3.0in;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>The initial page index.</span>
					</p></td>
					<td width=135 valign=top style='width:81.0pt;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>0</span>
					</p></td>
				</tr>
				<tr>
					<td width=219 valign=top style='width:131.4pt;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>empty_text</span></b>
					</p></td>
					<td width=360 valign=top style='width:3.0in;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>The content shown in the
							container when there is no data in the data source</span>
					</p></td>
					<td width=135 valign=top style='width:81.0pt;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>Empty string</span>
					</p></td>
				</tr>
				<tr>
					<td width=219 valign=top style='width:131.4pt;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>page_animation</span></b>
					</p></td>
					<td width=360 valign=top style='width:3.0in;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>Give an animation when the new
							page showing. You can choose </span>
					</p>
					<p class=MsoNormal>
						<span style='color:#31849B'>'fadein' - fade in</span>
					</p>
					<p class=MsoNormal>
						<span style='color:#31849B'>'slidedown' - slide down</span>
					</p>
					<p class=MsoNormal>
						<span style='color:#31849B'>'' - no animation</span>
					</p></td>
					<td width=135 valign=top style='width:81.0pt;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>Empty string</span>
					</p></td>
				</tr>
				<tr>
					<td width=219 valign=top style='width:131.4pt;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>page_animation_start</span></b>
					</p></td>
					<td width=360 valign=top style='width:3.0in;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>The starting style</span>
					</p></td>
					<td width=135 valign=top style='width:81.0pt;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>Empty string</span>
					</p></td>
				</tr>
				<tr>
					<td width=219 valign=top style='width:131.4pt;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>page_animation_end</span></b>
					</p></td>
					<td width=360 valign=top style='width:3.0in;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>The ending style</span>
					</p></td>
					<td width=135 valign=top style='width:81.0pt;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>Empty string</span>
					</p></td>
				</tr>
				<tr>
					<td width=219 valign=top style='width:131.4pt;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>page_animation_duration</span></b>
					</p></td>
					<td width=360 valign=top style='width:3.0in;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>The duration of page change
							animation</span>
					</p></td>
					<td width=135 valign=top style='width:81.0pt;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>500</span>
					</p></td>
				</tr>
				<tr>
					<td width=219 valign=top style='width:131.4pt;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>page_changed</span></b>
					</p></td>
					<td width=360 valign=top style='width:3.0in;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>The function that is triggered
							after the page change. It has two parameters:</span>
					</p>
					<p class=MsoListParagraph style='text-indent:-.25in'>
						<span style='font-family:
						Symbol;color:#31849B'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span style='color:#31849B'>page_index - current page index</span>
					</p>
					<p class=MsoListParagraph style='text-indent:-.25in'>
						<span style='font-family:
						Symbol;color:#31849B'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span><span style='color:#31849B'>d - the data in current page</span>
					</p></td>
					<td width=135 valign=top style='width:81.0pt;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>Empty function</span>
					</p></td>
				</tr>
				<tr>
					<td width=219 valign=top style='width:131.4pt;border:none;border-bottom:solid #4BACC6 1.0pt;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>page_suspended</span></b>
					</p></td>
					<td width=360 valign=top style='width:3.0in;border:none;border-bottom:solid #4BACC6 1.0pt;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>Suspend the UI change</span>
					</p></td>
					<td width=135 valign=top style='width:81.0pt;border:none;border-bottom:solid #4BACC6 1.0pt;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>false</span>
					</p></td>
				</tr>
			</table>

			<p class=MsoNormal>
				<span style='font-size:10.0pt;font-family:Consolas'>&nbsp;</span>
			</p>

			<h1><a name="_Toc323558118"></a><a name="_Toc323558133">Get/set data from/to
			page</a></h1>

			<p class=MsoNormal>
				This plug in provides <span style='font-size:10.0pt;
				font-family:Consolas'>pushObject</span>&nbsp;and <span style='font-size:10.0pt;
				font-family:Consolas'>setObject</span>&nbsp;function to help you get/set data
				from/to the page. getSetData.aspx is a demo for this two functions.
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal>
				Prerequisite - You must set name attribute to the html tag.
				For example:
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas;color:blue'>&lt;</span><span style='font-size:10.0pt;
				font-family:Consolas;color:maroon'>input</span><span style='font-size:10.0pt;
				font-family:Consolas'> <span style='color:red'>type</span><span
					style='color:blue'>=&quot;text&quot;</span> <span style='color:red'>name</span><span
					style='color:blue'>=&quot;<span style='background:yellow'>Name</span>&quot;</span> <span style='color:blue'>/&gt;</span></span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				The name must be same as the property
				name in the data model:<span style='font-size:12.0pt;font-family:Consolas'> </span><span
				style='font-size:10.0pt;font-family:Consolas;color:blue'>public</span><span
				style='font-size:10.0pt;font-family:Consolas'> <span style='color:blue'>string</span> <span style='background:yellow'>Name</span> { <span style='color:blue'>get</span>; <span style='color:blue'>set</span>; }</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:12.0pt;
				font-family:Consolas'>&nbsp;</span>
			</p>

			<p class=MsoNormal>
				pushObject - collect the user inputs into an Object:
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas;color:blue'>var</span><span style='font-size:9.5pt;
				font-family:Consolas'> model = $(<span style='color:maroon'>&quot;#divDetail1&quot;</span>).pushObject();</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:12.0pt;
				font-family:Consolas'>&nbsp;</span>
			</p>

			<p class=MsoNormal>
				setObject - set values in a model to the form:
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>$(<span style='color:maroon'>&quot;#divDetail2&quot;</span>).setObject(model);</span>
			</p>

			<h1>Data type helper</h1>

			<p class=MsoNormal>
				You can format/parse data with $d functions:
			</p>

			<h2><a name="_Toc323558119">String</a></h2>

			<h3><a name="_Toc323558120">$d.string.truncate(string, length, ellipse)</a></h3>

			<p class=MsoNormal>
				Restricts the maximum length of strings
			</p>

			<p class=MsoNormal>
				<span style='font-size:10.0pt;font-family:Consolas'>&nbsp;</span>
			</p>

			<table class=MsoTableLightShadingAccent5 border=1 cellspacing=0 cellpadding=0
			style='border-collapse:collapse;border:none'>
				<tr>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>&nbsp;</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>Description</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>Default value</span></b>
					</p></td>
				</tr>
				<tr>
					<td width=246 valign=top style='width:2.05in;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>string</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>the input string</span>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>&nbsp;</span>
					</p></td>
				</tr>
				<tr>
					<td width=246 valign=top style='width:2.05in;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>length (optional)</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>the maximum length</span>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>0</span>
					</p></td>
				</tr>
				<tr>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>ellipse (optional)</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>the ellipse string</span>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>...</span>
					</p></td>
				</tr>
			</table>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;</span>
			</p>

			<p class=MsoNormal>
				<b>Example: </b>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Input:</b><span
				style='font-size:9.5pt;font-family:Consolas'> $d.string.truncate(<span
					style='color:maroon'>&quot;a very long string&quot;</span>, 5)</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Outpout:</b><span
				style='font-size:9.5pt;font-family:Consolas'> a ver...</span>
			</p>

			<h3><a name="_Toc323558121">$d.string.stripHTML(string)</a></h3>

			<p class=MsoNormal>
				Strips HTML tags from the string.
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<table class=MsoTableLightShadingAccent5 border=1 cellspacing=0 cellpadding=0
			style='border-collapse:collapse;border:none'>
				<tr>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>&nbsp;</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>Description</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>Default value</span></b>
					</p></td>
				</tr>
				<tr>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>string</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>the input string</span>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>&nbsp;</span>
					</p></td>
				</tr>
			</table>

			<p class=MsoNormal>
				<span style='font-size:10.0pt;font-family:Consolas'>&nbsp;</span>
			</p>

			<p class=MsoNormal>
				<b>Example: </b>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Input:</b><span
				style='font-size:9.5pt;font-family:Consolas'> $d.string. stripHTML(<span
					style='color:maroon'>&quot;</span><span style='color:#A31515'>&lt;span
						style='color:Blue'&gt;a blue span&lt;/span&gt;</span><span style='color:maroon'>&quot;</span>)</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Outpout:</b><span
				style='font-size:9.5pt;font-family:Consolas'> a blue span</span>
			</p>

			<h3><a name="_Toc323558122">$d.string.encodeHTML(string)</a></h3>

			<p class=MsoNormal>
				HTML-encodes a string and returns the encoded string.
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<table class=MsoTableLightShadingAccent5 border=1 cellspacing=0 cellpadding=0
			style='border-collapse:collapse;border:none'>
				<tr>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>&nbsp;</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>Description</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>Default value</span></b>
					</p></td>
				</tr>
				<tr>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>string</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>the input string</span>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>&nbsp;</span>
					</p></td>
				</tr>
			</table>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;</span>
			</p>

			<p class=MsoNormal>
				<b>Example: </b>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Input:</b><span
				style='font-size:9.5pt;font-family:Consolas'> $d.string.encodeHTML(<span
					style='color:maroon'>&quot;</span><span style='color:#A31515'>&lt;span
						style='color:Blue'&gt;a blue span&lt;/span&gt;</span><span style='color:maroon'>&quot;</span>)</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Outpout:</b><span
				style='font-size:9.5pt;font-family:Consolas'> &amp;lt;span
					style=&amp;#39;color:Blue&amp;#39;&amp;gt;a blue span&amp;lt;/span&amp;gt;</span>
			</p>

			<h3><a name="_Toc323558123">$d.string.decodeHTML</a></h3>

			<p class=MsoNormal>
				Decodes&nbsp;an&nbsp;HTML-encoded string and returns
				the&nbsp;decoded&nbsp;string.
			</p>

			<p class=MsoNormal>
				<span style='font-size:10.0pt;font-family:Consolas'>&nbsp;</span>
			</p>

			<table class=MsoTableLightShadingAccent5 border=1 cellspacing=0 cellpadding=0
			style='border-collapse:collapse;border:none'>
				<tr>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>&nbsp;</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>Description</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>Default value</span></b>
					</p></td>
				</tr>
				<tr>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>string</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>the input string</span>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>&nbsp;</span>
					</p></td>
				</tr>
			</table>

			<p class=MsoNormal>
				<span style='font-size:10.0pt;font-family:Consolas'>&nbsp;</span>
			</p>

			<p class=MsoNormal>
				<b>Example: </b>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Input:</b><span
				style='font-size:9.5pt;font-family:Consolas'> $d.string.decodeHTML (<span
					style='color:maroon'>&quot;</span><span style='color:#A31515'>&amp;lt;span
						style=&amp;#39;color:Blue&amp;#39;&amp;gt;a blue span&amp;lt;/span&amp;gt;</span><span
					style='color:maroon'>&quot;</span>)</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Outpout:</b><span
				style='font-size:9.5pt;font-family:Consolas'> &lt;span style='color:Blue'&gt;a
					blue span&lt;/span&gt;</span>
			</p>

			<h2><a name="_Toc323558124">Date time</a></h2>

			<h3><a name="_Toc323558125"><span style='font-size:10.0pt'>$d.</span>datetime.parse(value,
			format)</a></h3>

			<p class=MsoNormal>
				Converts the specified string value into its JavaScript Date
				equivalent
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<table class=MsoTableLightShadingAccent5 border=1 cellspacing=0 cellpadding=0
			style='border-collapse:collapse;border:none'>
				<tr>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>&nbsp;</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>Description</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>Default value</span></b>
					</p></td>
				</tr>
				<tr>
					<td width=246 valign=top style='width:2.05in;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>value</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>The input string (The value
							can be a C# serialized string,&nbsp; e.g. /Date(349956184000)/)</span>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>&nbsp;</span>
					</p></td>
				</tr>
				<tr>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>format (optional)</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>The input data time format.
							Please go to <a href="http://code.google.com/p/datejs/#Converting_to_String">http://code.google.com/p/datejs/#Converting_to_String</a> to get more details </span>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>&nbsp;</span>
					</p></td>
				</tr>
			</table>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;</span>
			</p>

			<p class=MsoNormal>
				<b>Example: </b>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Input:</b><span
				style='font-size:9.5pt;font-family:Consolas'> $d.datetime.parse(<span
					style='color:maroon'>&quot;03/05/2011&quot;</span>,<span style='color:maroon'> &quot;MM/dd/yyyy&quot;</span>)</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Output:</b> JavaScript Date: &nbsp;'Sat
				Mar 05 2011 00:00:00'
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Input:</b><span
				style='font-size:9.5pt;font-family:Consolas'> $d.datetime.parse(<span
					style='color:maroon'>&quot;/Date(349956184000)/&quot;)</span></span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Output:</b> JavaScript Date: &nbsp;'Mon
				Feb 02 1981 02:03:04'
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Input:</b><span
				style='font-size:9.5pt;font-family:Consolas'> $d.datetime.parse(<span
					style='color:maroon'>&quot;2012-11-23&quot;)</span></span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Output:</b> JavaScript Date: &nbsp;'Fri
				Nov 23 2012 00:00:00<span class=apple-converted-space><span style='font-size:
					13.5pt;color:gray'>&nbsp;</span></span>'
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				&nbsp;
			</p>

			<p class=MsoNormal>
				Fri Nov 23 2012 00:00:00
			</p>

			<h3><a name="_Toc323558126"><span style='font-size:10.0pt'>$d.</span>datetime.format(value,
			toFormat, fromFormat)</a></h3>

			<p class=MsoNormal>
				Converts the value to its equivalent string representation.
				Use format argument to specify format (optional). See <a
				href="http://code.google.com/p/datejs/wiki/FormatSpecifiers">FormatSpecifiers</a>&nbsp;for
				more info.
			</p>

			<p class=MsoNormal>
				<span style='font-size:10.0pt;font-family:Consolas'>&nbsp;</span>
			</p>

			<table class=MsoTableLightShadingAccent5 border=1 cellspacing=0 cellpadding=0
			style='border-collapse:collapse;border:none'>
				<tr>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>&nbsp;</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>Description</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>Default value</span></b>
					</p></td>
				</tr>
				<tr>
					<td width=246 valign=top style='width:2.05in;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>value</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>The input string (The value
							can be a C# serialized string,&nbsp; e.g. /Date(349956184000)/)</span>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>&nbsp;</span>
					</p></td>
				</tr>
				<tr>
					<td width=246 valign=top style='width:2.05in;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>toFormat (optional)</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>Convert the value to this
							representation </span>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>yyyy-MM-dd HH:mm:ss</span>
					</p></td>
				</tr>
				<tr>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>fromFormat (optional)</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>Extract the string from this representation</span>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>&nbsp;</span>
					</p></td>
				</tr>
			</table>

			<p class=MsoNormal>
				<span style='font-size:10.0pt;font-family:Consolas'>&nbsp;</span>
			</p>

			<p class=MsoNormal>
				<b>Example: </b>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Input:</b><span
				style='font-size:9.5pt;font-family:Consolas'> $d.datetime.format(<span
					style='color:maroon'>&quot;03/05/2011&quot;</span>,<span style='color:maroon'> &quot;MMMM
						d yyyy h:m tt&quot;</span>,<span style='color:maroon'> &quot;MM/dd/yyyy&quot;</span>)</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Output:</b> March 5 2011 0:0
				AM
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Input:</b><span
				style='font-size:9.5pt;font-family:Consolas'> $d.datetime.format(<span
					style='color:maroon'>&quot;/Date(349956184000)/&quot;</span>)</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Output:</b> 1981-02-02
				02:03:04
			</p>

			<h3><a name="_Toc323558127"><span style='font-size:10.0pt'>$d.</span>datetime.validate(value,
			format)</a></h3>

			<p class=MsoNormal>
				Validates if the value is correctly represented in a
				specified format
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<table class=MsoTableLightShadingAccent5 border=1 cellspacing=0 cellpadding=0
			style='border-collapse:collapse;border:none'>
				<tr>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>&nbsp;</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>Description</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>Default value</span></b>
					</p></td>
				</tr>
				<tr>
					<td width=246 valign=top style='width:2.05in;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>value</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>The input string </span>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;background:#D2EAF1;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>&nbsp;</span>
					</p></td>
				</tr>
				<tr>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>format </span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>The specified format</span>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>&nbsp;</span>
					</p></td>
				</tr>
			</table>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal>
				<b>Example: </b>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Input:</b><span
				style='font-size:9.5pt;font-family:Consolas'> $d.datetime.validate(<span
					style='color:maroon'>&quot;03/05/2011&quot;</span>,<span style='color:maroon'> &quot;MM/dd/yyyy&quot;</span>)</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Output:</b> true
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Input:</b><span
				style='font-size:9.5pt;font-family:Consolas'> $d.datetime.validate(<span
					style='color:maroon'>&quot;3/05/2011&quot;</span>,<span style='color:maroon'> &quot;MM/dd/yyyy&quot;</span>)</span>
			</p>

			<p class=MsoNormal>
				<b>Output:</b> false
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Input:</b><span
				style='font-size:9.5pt;font-family:Consolas'> $d.datetime.validate(<span
					style='color:maroon'>&quot;2/30/2011&quot;</span>,<span style='color:maroon'> &quot;M/dd/yyyy&quot;</span>)</span>
			</p>

			<p class=MsoNormal>
				<b>Output:</b> false
			</p>

			<h2><a name="_Toc323558128">GUID</a></h2>

			<h3><a name="_Toc323558129">$d. guid. generate()</a></h3>

			<p class=MsoNormal>
				Generate a new GUID
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal>
				<b>Example: </b>
			</p>

			<p class=MsoNormal>
				<b>Input:</b> $d. guid. generate()
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Output:</b> bdf9a394-d410-0222-662c-4036311f35ce
			</p>

			<h3><a name="_Toc323558130">$d. guid. validate(value)</a></h3>

			<p class=MsoNormal>
				Validates if the value is a correct GUID
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal>
				<b>Example: </b>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Input:</b><span
				style='font-size:9.5pt;font-family:Consolas'>$d.guid.validate(<span
					style='color:maroon'>&quot;bdf9a394-d410-0222-662c-4036311f35ce&quot;</span>)</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Output:</b> true
			</p>

			<h2><a name="_Toc323558131">URL</a></h2>

			<h3><a name="_Toc323558132">$d.url.para(name)</a></h3>

			<p class=MsoNormal>
				Gets a parameter in the current URL
			</p>

			<table class=MsoTableLightShadingAccent5 border=1 cellspacing=0 cellpadding=0
			style='border-collapse:collapse;border:none'>
				<tr>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>&nbsp;</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>Description</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border-top:solid #4BACC6 1.0pt;
					border-left:none;border-bottom:solid #4BACC6 1.0pt;border-right:none;
					padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>Default value</span></b>
					</p></td>
				</tr>
				<tr>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<b><span style='color:#31849B'>name</span></b>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>The parameter name </span>
					</p></td>
					<td width=246 valign=top style='width:2.05in;border:none;border-bottom:solid #4BACC6 1.0pt;
					background:#D2EAF1;padding:0in 5.4pt 0in 5.4pt'>
					<p class=MsoNormal>
						<span style='color:#31849B'>&nbsp;</span>
					</p></td>
				</tr>
			</table>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal>
				<b>Example </b>(The current url is<b> </b><a
				href="https://www.google.com/search?q=jquery">https://www.google.com/search?q=jquery</a>):
			</p>

			<p class=MsoNormal>
				<b>Input: </b>$d. url. para(<span style='font-size:9.5pt;
				font-family:Consolas;color:maroon'>&quot;q&quot;</span><span style='font-size:
				9.5pt;font-family:Consolas'>)</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<b>Output:</b> jquery
			</p>

			<h1><a name="_Toc323558134">Cope with complex data</a></h1>

			<p class=MsoNormal>
				For some cases, we could need to collaborate with a more
				complicated model that contains not only one list and value. The complex.aspx
				gives an example to cope with a complex model.
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal>
				The following function in complex.aspx.cs returns a model
				that has a value - Name, and two lists - Approved and Denied:
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>[<span style='color:#2B91AF'>WebMethod</span>]</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas;color:blue'>public</span><span style='font-size:10.0pt;
				font-family:Consolas'> <span style='color:blue'>static</span> <span
					style='color:#2B91AF'>ComplexModel</span> GetModel()</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>&nbsp;</span>
			</p>

			<p class=MsoNormal>
				I use this code to bind these 3 values to the page:
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>$.doPostback(<span style='color:maroon'>&quot;GetModel&quot;</span>,
					{}, {</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					callback: <span style='color:blue'>function</span> (data) {</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					$(<span style='color:maroon'>&quot;#name&quot;</span>).text(data.d.Name);</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					$(<span style='color:maroon'>&quot;#Container1&quot;</span>).dataBind($(<span
					style='color:maroon'>&quot;#template&quot;</span>).html(), data.d.Approved, {
					page_container: <span style='color:maroon'>&quot;#page1&quot;</span>,
					page_size: 5 });</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					$(<span style='color:maroon'>&quot;#Container2&quot;</span>).dataBind($(<span
					style='color:maroon'>&quot;#template&quot;</span>).html(), data.d.Denied, {
					page_container: <span style='color:maroon'>&quot;#page2&quot;</span>,
					page_size: 5 });</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					}</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.5pt;
				font-family:Consolas'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					});</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>&nbsp;</span>
			</p>

			<p class=MsoNormal>
				Please notice that, in this time I bind the repeaters with <span
				style='font-size:10.0pt;font-family:Consolas;background:yellow'>data.d.Approved</span><span
				style='font-size:10.0pt;font-family:Consolas'> </span>and<span
				style='font-size:10.0pt;font-family:Consolas'> <span style='background:yellow'>data.d.Denied</span></span>,
				not <span style='font-size:10.0pt;font-family:Consolas'>data.d</span>. Other
				parts are same as before.
			</p>

			<h1><a name="_Toc323558135">Nested repeater</a></h1>

			<p class=MsoNormal>
				Sometime we have to nest a repeater in another one. The page
				nested.aspx shows you how to deal with this scenario.
			</p>

			<h2><a name="_Toc323558136">Nested foreach</a></h2>

			<p class=MsoNormal style='text-autospace:none'>
				The simple way is to define the nested
				repeater in the template. You can use a <span style='font-size:10.0pt;
				font-family:Consolas'>{#foreach}{#/for}</span><span style='font-size:12.0pt;
				font-family:Consolas'> </span>inside another &nbsp;<span style='font-size:10.0pt;
				font-family:Consolas'>{#foreach}{#/for}</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:12.0pt;
				font-family:Consolas'>&nbsp;</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				In the nested.aspx, we bind the
				list of <span style='font-size:10.0pt;font-family:Consolas;color:#2B91AF'>NestedModel</span><span
				style='font-size:9.0pt'> </span>in this way:
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:12.0pt;
				font-family:Consolas'>&nbsp;</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>{#foreach $T as <span style='color:#C00000'>d</span>}</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span
					style='color:darkgreen'>//something here</span></span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.0pt'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span
				style='font-size:10.0pt;font-family:Consolas'>{#foreach $T.d.<span
					style='color:red'>Sub </span>as <span style='color:#C00000'>s</span>}</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span
					style='color:darkgreen'>//something here</span></span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:9.0pt'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span
				style='font-size:10.0pt;font-family:Consolas'>{#/for}</span>
			</p>

			<p class=MsoNormal style='text-indent:.5in;text-autospace:none'>
				<span
				style='font-size:10.0pt;font-family:Consolas;color:darkgreen'>//something here</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>{#/for}</span>
			</p>

			<p class=MsoNormal>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas;color:#C00000'>d</span><span style='font-size:10.0pt;
				font-family:Consolas;color:#00B050'> </span>and<span style='font-size:10.0pt;
				font-family:Consolas;color:#00B050'> </span><span style='font-size:10.0pt;
				font-family:Consolas;color:#C00000'>s</span><span style='font-size:10.0pt;
				font-family:Consolas;color:#00B0F0'> </span>are two arbitrary names. <span
				style='font-size:10.0pt;font-family:Consolas;color:red'>Sub </span>is a
				property of <span style='font-size:10.0pt;font-family:Consolas;color:#2B91AF'>NestedModel</span>.<span
				style='font-size:10.0pt;font-family:Consolas;color:#2B91AF'> </span>That is a
				list of<span style='font-size:10.0pt;font-family:Consolas;color:#2B91AF'> DemoModel</span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:12.0pt;
				font-family:Consolas;color:#2B91AF'>&nbsp;</span>
			</p>

			<h2><a name="_Toc323558137">Nested databind</a></h2>

			<p class=MsoNormal style='text-autospace:none'>
				In the second demo, we try to
				apply the pagination function to the sub repeater. Thus, I nest the databind in
				the <span style='font-size:10.0pt;font-family:Consolas'>page_changed </span>option
				of the parent repeater. <span style='font-size:10.0pt;font-family:Consolas'>page_changed </span>is the call back function triggered when the page index changed or the
				repeater initiated.
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				I add these two div's for the
				content container and page container. Their IDs are generated automatically.
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas;color:blue'>&lt;</span><span style='font-size:10.0pt;
				font-family:Consolas;color:maroon'>div</span><span style='font-size:10.0pt;
				font-family:Consolas'> <span style='color:red'>id</span><span style='color:
					blue'>=&quot;c{$T.d$index}&quot;&gt;&lt;/</span><span style='color:maroon'>div</span><span
					style='color:blue'>&gt;</span></span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas;color:blue'>&lt;</span><span style='font-size:10.0pt;
				font-family:Consolas;color:maroon'>div</span><span style='font-size:10.0pt;
				font-family:Consolas'> <span style='color:red'>id</span><span style='color:
					blue'>=&quot;p{$T.d$index}&quot;&gt;&lt;/</span><span style='color:maroon'>div</span><span
					style='color:blue'>&gt;</span></span>
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>page_changed</span> provides two parameters for you: <span
				style='font-size:10.0pt;font-family:Consolas'>page_index,</span> and <span
				style='font-size:10.0pt;font-family:Consolas'>d</span>:
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>page_index is the current page index
			</p>

			<p class=MsoListParagraph style='text-indent:-.25in;text-autospace:none'>
				<span
				style='font-family:Symbol'>'<span style='font:7.0pt "Times New Roman"'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></span>d is the data source of the current page
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				Then we add the dataBind
				function in it. We get the container programmatically and bind the Sub property
				for them.
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				&nbsp;
			</p>

			<p class=MsoNormal style='text-autospace:none'>
				<span style='font-size:10.0pt;
				font-family:Consolas'>$(<span style='color:maroon'>&quot;#Container2&quot;</span>).dataBind($(<span
					style='color:maroon'>&quot;#template2&quot;</span>).html(), data.d, {
					page_container: <span style='color:maroon'>&quot;#page2&quot;</span>,
					page_size: 4, page_changed: <span style='color:blue'>function</span> (<span
					style='background:yellow'>page_index, d</span>) {</span>
			</p>

			<p class=MsoNormal style='text-indent:.5in;text-autospace:none'>
				<span
				style='font-size:10.0pt;font-family:Consolas;color:blue'>for</span><span
				style='font-size:10.0pt;font-family:Consolas'> (i = 0; i &lt; d.length; i++) {</span>
			</p>

			<p class=MsoNormal style='margin-left:.5in;text-indent:.5in;text-autospace:
			none'>
				<span style='font-size:10.0pt;font-family:Consolas;background:yellow'>$(<span
					style='color:maroon'>&quot;#c&quot;</span> + i)</span><span style='font-size:
				10.0pt;font-family:Consolas'>.dataBind($(<span style='color:maroon'>&quot;#subtemplate&quot;</span>).html(),
					d[i].Sub, { page_container: <span style='color:maroon;background:yellow'>&quot;#p&quot;</span><span
					style='background:yellow'> + i</span>, page_size: 2 });}}});</span>
			</p>

		</div>

	</body>

</html>
